<template>
  <component
    :is="components[currentType]"
    :value="value"
    :preview="preview"
  ></component>
</template>

<script setup>
import { computed } from 'vue';
import WidgetTextH1 from './ui-groups/plug-in-units/widget-text-h1.vue';
import WidgetImage from './ui-groups/plug-in-units/widget-image.vue';
import WidgetSelect from './ui-groups/plug-in-units/widget-select.vue';
//视频
import WidgetVideo from './ui-groups/plug-in-units/widget-video.vue';
//表格
import WidgetTable from './ui-groups/plug-in-units/widget-table.vue';

// 条形和柱状图
// import PlotLine from './ui-groups/charts/plot-line.vue';
import WidgetLine from './ui-groups/charts/widget-line.vue';
import WidgetGroupLine from './ui-groups/charts/widget-group-line.vue';
import WidgetBar from './ui-groups/charts/widget-bar.vue';
import WidgetGroupBar from './ui-groups/charts/widget-group-bar.vue';
import WidgetAreaChart from './ui-groups/charts/widget-area-chart.vue';
import WidgetStackingArea from './ui-groups/charts/widget-stacking-area.vue';
import WidgetStackedColumn from './ui-groups/charts/widget-stacked-column.vue';
import WidgetBarColumnar from './ui-groups/charts/widget-bar-columnar';
import WidgetLineBar from './ui-groups/charts/widget-line-bar';
// 饼图
import WidgetPie from './ui-groups/charts/pie/widget-pie.vue';

// 仪表
import WidgetGauge from './ui-groups/charts/gauge/widget-gauge.vue';
import WidgetMeterGauge from './ui-groups/charts/gauge/widget-meter-gauge.vue';

// 雷达图
import WidgetRadar from './ui-groups/charts/radar/widget-radar.vue';
import WidgetAreaRadar from './ui-groups/charts/radar/widget-area-radar.vue';

// 旭日图
import WidgetSunburst from './ui-groups/charts/sunburst/widget-sunburst.vue';
import WidgetHierarchySunburst from './ui-groups/charts/sunburst/widget-hierarchy-sunburst.vue';

// 水波图
import WidgetWave from './ui-groups/charts/wave/widget-wave.vue';

const props = defineProps({
  value: {
    type: Object,
    default: () => {}
  },
  preview: {
    type: Boolean,
    default: () => false
  }
});

// 将组件type转换成(widget-text-h1转成WidgetTextH1)
const currentType = computed(() => {
  // console.log(props.value, '传值-------');
  let str = props.value?.type?.replace(/-(\w)/g, (_, c) =>
    c ? c.toUpperCase() : ''
  );
  str = `${str?.slice(0, 1).toUpperCase()}${str?.slice(1)}`;
  return str;
});

const components = {
  WidgetTextH1,
  WidgetImage,
  WidgetSelect,
  WidgetVideo,
  WidgetTable,

  WidgetLine,
  // PlotLine,
  WidgetGroupLine,
  WidgetBar,
  WidgetGroupBar,
  WidgetAreaChart,
  WidgetStackingArea,
  WidgetStackedColumn,
  WidgetBarColumnar,
  WidgetLineBar,

  //饼状类
  WidgetPie,

  //仪表盘
  WidgetGauge,
  WidgetMeterGauge,

  //雷达图
  WidgetRadar,
  WidgetAreaRadar,

  //旭日图
  WidgetSunburst,
  WidgetHierarchySunburst,
  //水波图
  WidgetWave
};
</script>
<style scoped lang="scss"></style>
